<template>
  <div class="filedisplay-page">
    <!-- 根据不同类型文件展示不同样式 -->
    <div class="file-desc">
      <span style="font-size: 14px">文件名:</span> {{ this.filename }}
    </div>
    <div class="file-info">
      <img v-if="isImage" width="100%" height="100%" :src="downloadUrl" />
      <!-- <textarea v-else class="file-content" v-model="filecontent"></textarea> -->
      <codemirror
        ref="myCm"
        v-else
        :value="filecontent"
        :options="cmOptions"
      ></codemirror>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { codemirror } from "vue-codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/blackboard.css";
import "codemirror/mode/javascript/javascript.js";
import "codemirror/mode/xml/xml.js";
import "codemirror/mode/htmlmixed/htmlmixed.js";
import "codemirror/mode/css/css.js";
import "codemirror/mode/yaml/yaml.js";
import "codemirror/mode/sql/sql.js";
import "codemirror/mode/python/python.js";
import "codemirror/mode/markdown/markdown.js";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/javascript-hint.js";
import "codemirror/addon/hint/xml-hint.js";
import "codemirror/addon/hint/css-hint.js";
import "codemirror/addon/hint/html-hint.js";
import "codemirror/addon/hint/sql-hint.js";
import "codemirror/addon/hint/anyword-hint.js";
import "codemirror/addon/lint/lint.css";
import "codemirror/addon/lint/lint.js";
import "codemirror/addon/lint/json-lint";
// import "codemirror/addon/lint/html-lint.js";
// import "codemirror/addon/lint/css-lint.js";
import "codemirror/addon/lint/javascript-lint.js";
import "codemirror/addon/fold/foldcode.js";
import "codemirror/addon/fold/foldgutter.js";
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/brace-fold.js";
import "codemirror/addon/fold/xml-fold.js";
import "codemirror/addon/fold/comment-fold.js";
import "codemirror/addon/fold/markdown-fold.js";
import "codemirror/addon/fold/indent-fold.js";
import "codemirror/addon/edit/closebrackets.js";
import "codemirror/addon/edit/closetag.js";
import "codemirror/addon/edit/matchtags.js";
import "codemirror/addon/edit/matchbrackets.js";
import "codemirror/addon/selection/active-line.js";
import "codemirror/addon/search/jump-to-line.js";
import "codemirror/addon/dialog/dialog.js";
import "codemirror/addon/dialog/dialog.css";
import "codemirror/addon/search/searchcursor.js";
import "codemirror/addon/search/search.js";
import "codemirror/addon/display/autorefresh.js";
import "codemirror/addon/selection/mark-selection.js";
import "codemirror/addon/search/match-highlighter.js";
export default {
  name: "FileDisplay",
  components: {
    codemirror,
  },
  props: {
    fileNode: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      isImage: false,
      downloadUrl: "http://pic1.win4000.com/wallpaper/0/5417cb07a36f5.jpg",
      filename: "",
      filesize: null,
      filecontent: "",
      cmMode: "default",
      cmOptions: {
        theme: "default",
        mode:
          !this.cmMode || this.cmMode == "default"
            ? "application/json"
            : this.cmMode,
        lineWrapping: true,
        lineNumbers: true,
        // gutters: [
        //   "CodeMirror-lint-markers",
        //   "CodeMirror-linenumbers",
        //   "CodeMirror-foldgutter",
        // ],
        matchTags: { bothTags: true },
        matchBrackets: true,
        styleActiveLine: true,
        autoRefresh: true,
        highlightSelectionMatches: {
          minChars: 2,
          style: "matchhighlight",
          showToken: true,
        },
        styleSelectedText: true,
      },
    };
  },
  watch: {
    fileNode(newVal) {
      this.change(newVal);
    },
  },
  mounted() {
    this.change(this.fileNode);
  },
  methods: {
    change(fNode) {
      // console.log(this.fileNode);
      // this.downloadUrl = fNode.download_url;
      let url = fNode.download_url;
      // tmp临时处理
      this.downloadUrl = url.replace(
        "https://gitee.com",
        "http://localhost:8080/api"
      );

      let title = (this.filename = fNode.title);
      let extType = (this.cmMode = title.substring(title.lastIndexOf(".") + 1));
      // 是否图片
      this.isImage = "jpg/jpeg/png/svg/gif".indexOf(extType) > 0;
      if (this.isImage) {
        return;
      }
      this.getFileContent(this.downloadUrl);
    },
    getFileContent(url) {
      let _this = this;
      axios({
        method: "get",
        url: url,
      }).then(function (response) {
        if (response.status == 200) {
          _this.filecontent = response.data;
        } else {
          _this.$message.error("获取文件内容出错!");
        }
      });
    },
  },
};
</script>

<style>
.filedisplay-page {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  padding: 5px;
}
.filedisplay-page .file-desc {
  height: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: 700;
  font-size: 12px;
}

.filedisplay-page .file-info {
  flex: 1;
}

.filedisplay-page .file-info .CodeMirror {
  /* overflow-y: scroll !important; */
  height: auto !important;
}
</style>